const path = require('path');
const {createCanvas, registerFont} = require('canvas')
const fontFilePath = path.join(__dirname, '../simhei.ttf'),
    fontFamily = 'SimHei'
registerFont(fontFilePath, {family: fontFamily})
const fs = require('fs');

const colors = ['rgb(146, 94, 177)', 'rgb(245, 106, 0)', 'rgb(114, 101, 230)', 'rgb(255, 191, 0)', 'rgb(0, 162, 174)', 'rgb(135, 208, 104)', 'rgb(51, 51, 51)', 'rgb(114, 101, 230)']
const colorsLen = colors.length

function Canvas() {
}

Canvas.draw = async function (filePath, text) {
    // canvas 画布尺寸， 60 * 60
    const canvasSize = 60
    const canvas = createCanvas(canvasSize, canvasSize)
    const ctx = canvas.getContext('2d')
    const out = fs.createWriteStream(filePath)
    const stream = canvas.createPNGStream();

    stream.pipe(out)
    // out.on('finish', () =>  console.log('The PNG file was created.', text))

    // 绘制一个新的路径时必须调用beginPath函数
    ctx.beginPath();
    ctx.lineWidth = 5;
    // ctx.strokeStyle="red";
    ctx.fillStyle = colors[Math.floor(Math.random() * (colorsLen + 1))];
    // ctx.strokeRect(0,0,200,200);
    // ctx.stroke();
    ctx.fillRect(0, 0, canvasSize, canvasSize);
    ctx.closePath();
    ctx.fill();

    //绘制文字的轨迹
    ctx.fillStyle = 'white'
    //设置文字的x轴水平对齐方式
    ctx.textAlign = 'center';
    //设置文字的y轴位置对齐方式
    ctx.textBaseline = 'middle';

    // Canvas.drawMultilineText(ctx, text, canvasSize, canvasSize / 2, 12, canvasSize / 2)
    Canvas.drawText(ctx, text, canvasSize, canvasSize / 2, canvasSize / 2)

    ctx.save();
}

/**
 * 取字符串的首字符写入 canvas
 * @param ctx
 * @param text
 * @param canvasWidth
 * @param defHeight
 * @param radius
 */
Canvas.drawText = function (ctx, text, canvasWidth, defHeight, radius) {
    ctx.font = 'bold ' + (canvasWidth * 0.7) + 'px sans-serif,' + fontFamily;
    ctx.fillText(text.substr(0, 1), radius, defHeight);
}

/**
 * 将所有字符按照自动换行的形式写入 canvas
 * @param ctx
 * @param text
 * @param canvasWidth
 * @param defHeight 距离画布的竖直距离
 * @param defFontSize
 * @param radius
 */
Canvas.drawMultilineText = function (ctx, text, canvasWidth, defHeight, defFontSize, radius) {
    const textWidth = ctx.measureText(text).width
    const textHeight = textWidth < canvasWidth ? (canvasWidth / text.length) : defFontSize;
    ctx.font = 'bold ' + textHeight + 'px sans-serif';
    let str = text
    let lineWidth = 0;
    console.log(textWidth, canvasWidth)
    //绘制字体距离canvas顶部初始的高度
    let initHeight = textWidth < canvasWidth ? defHeight : defHeight - 5;
    //每次开始截取的字符串的索引
    let lastSubStrIndex = 0;
    for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        console.log(lineWidth, canvasWidth, str, ctx.measureText(str).width)
        if (lineWidth > canvasWidth) {
            //绘制截取部分
            ctx.fillText(str.substring(lastSubStrIndex, i), radius, initHeight);
            initHeight += textHeight;
            lineWidth = 0;
            lastSubStrIndex = i;
        }
        //绘制剩余部分
        if (i === str.length - 1) {
            ctx.fillText(str.substring(lastSubStrIndex, i + 1), radius, initHeight);
        }
    }
}

module.exports = Canvas;
